<template>
    <div id="contain" class="content-inner">
        <!-- 内容区头部 -->
        <header class="pageme-header">
            <!-- 面包屑 -->
            <Breadcrumb>
                <BreadcrumbItem to="/admin/home">主页</BreadcrumbItem>
                <BreadcrumbItem>个人管理</BreadcrumbItem>
                <BreadcrumbItem>个人主页</BreadcrumbItem>
            </Breadcrumb>
        </header>
        <div class="content-main">
            <!-- 内容区域显示部分 -->
            <div class="contain-main-show">
              <!-- 个人头像区域 -->
              <div class="userInfo-header">
                  <div class="userInfo-header-main">
                      <div class="userInfo-avator">
                          <img :src="user.uAvatar" alt="">
                          <!-- 修改上传头像组件 -->
                          <div class="upload-file">
                            <form enctype="multipart/form-data">
                                <ImgCutter class="my-file"
                                    :boxWidth="500"
                                    :boxHeight="300"
                                    :cutWidth="200"
                                    :cutHeight="200"
                                    :sizeChange="false"
                                    v-on:cutDown="cutDown">
                                    <button slot="open">
                                        修改头像
                                    </button>
                                </ImgCutter>
                            </form>
                          </div>
                      </div>
                      <div class="userInfo-nickName">
                          <span>{{user.uName}}</span>
                      </div>
                  </div>
              </div>
              <Alert type="success">上次来过：{{user.uLastLogintime | dataFormat}}</Alert>
              <!-- 基本信息区域 -->
              <Divider orientation="left">基本信息</Divider>
              <div class="normal-info">
                  <b-row>
                      <b-col cols="12" sm="12" md="6" lg="6">
                          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                              <FormItem label="用户名" prop="username">
                                  <Input v-model="formValidate.username" readonly />
                              </FormItem>
                              <FormItem label="昵称" prop="uName">
                                  <Input v-model="formValidate.uName"/>
                              </FormItem>
                              <FormItem label="性别" prop="uGender">
                                  <Input v-model="formValidate.uGender" placeholder="男/女"/>
                              </FormItem>
                              <FormItem label="标签" prop="uBio">
                                  <Input v-model="formValidate.uBio"/>
                              </FormItem>
                              <FormItem label="生日" prop="uBirthday">
                                  <DatePicker type="date" v-model="formValidate.uBirthday"></DatePicker>
                              </FormItem>
                              <FormItem>
                                  <Button type="primary" @click="saveUser('formValidate')">保存</Button>
                              </FormItem>
                          </Form>
                      </b-col>
                  </b-row>
              </div>
              <!-- 登录授权区域 -->
              <Divider orientation="left">登录授权</Divider>
              <div class="loginAuth-info">
                  <p class="red">tips：授权后，您可以用手机号或邮箱号直接登录闲贰了</p>
                  <p><Icon type="ios-call-outline" /> 手机号
                      <span class="auth" v-if="hasPhone==false"><router-link to="/addAdminLoginAuth">立即授权</router-link></span>
                      <span class="auth" v-if="hasPhone">已授权</span>
                  </p>
                  <p><Icon type="ios-mail-outline" /> 邮箱号
                      <span v-if="hasEmail==false"><router-link to="/addAdminLoginAuth">立即授权</router-link></span>
                      <span class="auth" v-if="hasEmail">已授权</span>
                  </p>
              </div>
            </div>
        </div>
    </div>
</template>

<script>

// eslint-disable-next-line import/no-extraneous-dependencies
import ImgCutter from 'vue-img-cutter'

export default {
  name: 'types',
  data () {
    return {
      formValidate: {
        username: '',
        uName: '',
        uGender: '',
        uBio: '',
        uBirthday: ''
      },
      ruleValidate: {
        username: [
          { required: true, message: '用户名', trigger: 'blur' }
        ],
        uName: [
          { required: true, message: '昵称不能为空', trigger: 'blur' }
        ],
        uGender: [
          { required: true, message: '性别不能为空', trigger: 'blur' }
        ],
        uBio: [
          { required: true, message: '签名不能为空', trigger: 'blur' }
        ],
        uBirthday: [
          { required: true, type: 'date', message: '生日不能为空', trigger: 'change' }
        ]
      },
      user: '', // 用户信息
      hasPhone: false,
      hasEmail: false
    }
  },
  created () {
    this.findById()
    this.findIdentityType()
  },
  methods: {
    // 上传头像
    cutDown (res) {
      const formData = new FormData()
      let file = res.file // 输出为file类型的文件对象
      formData.append('file', file)
      formData.append('uId', JSON.parse(localStorage.getItem('admin')).uId)
      console.log(formData)
      this.$axios({
        url: 'users/updateAvatar',
        method: 'post',
        contentType: false,
        data: formData,
        processData: false,
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findById()
        }
      })
        .catch(error => {
          console.log(error)
        })
    },
    // 根据用户Id查找个人信息
    findById () {
      this.$axios({
        url: 'users/findById/' + JSON.parse(localStorage.getItem('admin')).uId,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.user = res.data.object
          this.formValidate.username = res.data.object.username
          this.formValidate.uName = res.data.object.uName
          this.formValidate.uGender = res.data.object.uGender
          this.formValidate.uBio = res.data.object.uBio
          this.formValidate.uBirthday = res.data.object.uBirthday
        }
      })
    },
    // 修改并保存用户个人信息
    saveUser (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!')
          this.$axios({
            url: 'users/update',
            method: 'get',
            params: {
              uId: JSON.parse(localStorage.getItem('admin')).uId,
              uName: this.formValidate.uName,
              uGender: this.formValidate.uGender,
              uBio: this.formValidate.uBio,
              uBirthday: this.formValidate.uBirthday
            },
            headers: {
              Authorization: localStorage.getItem('adminToken')
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.findById()
              this.$axios({
                url: 'users/findById/' + JSON.parse(localStorage.getItem('admin')).uId,
                method: 'get',
                headers: {
                  Authorization: localStorage.getItem('adminToken')
                }
              }).then(res => {
                if (res.data.code === 200) {
                  this.user = res.data.object
                  localStorage.setItem('admin', JSON.stringify(this.user))
                  this.$router.go(0)
                }
              })
            }
          })
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    // 根据用户id查询该用户登录授权信息
    findIdentityType () {
      this.$axios({
        url: 'userLoginAuths/findIdentityTypeByUid/' + JSON.parse(localStorage.getItem('admin')).uId,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.identityType = res.data.list
          this.identityType.forEach(item => {
            if (item.ulaIdentityType === 'phone') {
              this.hasPhone = true
            } else if (item.ulaIdentityType === 'email') {
              this.hasEmail = true
            }
          })
        }
      }).catch(error => {
        console.log(error)
      })
    }
  },
  components: {
    ImgCutter
  }
}
</script>

<style scoped>
.my-file {
    width: 100%;
    height: 100px;
}
.my-file button {
    outline: 0;
    width: 100%;
    display: block;
    height: 100px;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    cursor: pointer;
    border: none;
    font-size: 12px;
    line-height: 100px;
    text-align: center;
}

.userInfo-avator {
    width: 100px;
    height: 100px;
    margin:0 auto;
    position: relative;
    cursor: pointer;
}
.userInfo-avator img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border:5px solid #c9c9c9;
}
.upload-file {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top:0;
    left:0;
    line-height: 100px;
    text-align: center;
    background: rgba(0,0,0,0.3);
    color: #fff;
    display: none;
    z-index: 10;
    cursor: pointer;
    transition: background .3s ease-in-out;
}
.userInfo-avator:hover .upload-file{
    display: block;
}
/* 主要内容区域 */
.content-inner{
    width: 100%;
    min-height: 495px;
}
/* 内容区头部 */
header.pageme-header{
    width: 100%;
    height: 50px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    line-height: 50px;
    padding-left: 20px;
}
/* 内容区域 */
.content-main{
    width: 100%;
    height:auto;
    padding: 15px;
}
/* 内容区域显示部分 */
.contain-main-show{
    width: 100%;
    height: auto;
}
.file-upload {
    width: 176px;
    height: 32px;
    position: relative;
    overflow: hidden;
    border: 1px solid #dcdee2;
    display: inline-block;
    border-radius: 4px;
    font-size: 12px;
    color: #515a6e;
    text-align: center;
    line-height: 26px;
    margin: 0 0 auto auto;
}
.file-upload-input {
    background-color: transparent;
    opacity: 0;
    position: absolute;
    width: 176px;
    height: 32px;
    top: 0px;
    right: 0px;
    cursor: pointer;
}
.user-auth {
    margin-left: 30px;
}
.user-auth p {
    margin-bottom: 5px;
}
.red {
    color: #ef4238;
}
.userInfo-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}
.userInfo-header-main {
    min-width: 300px;
    height: 150px;
}
.userInfo-nickName {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    text-align: center;
}
.userInfo-statistic {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.userInfo-statistic div {
    width: 70px;
    text-align: center;
}
.userInfo-statistic div:nth-child(2) {
    border-right: 1px solid #555;
}
.auth {
    color:chocolate;
}
</style>
